<template>
    <div class="app">
        <!-- <Nuxt/> -->
        <header class="app-header">herder</header>
        <section class="app-main">
            <aside class="app-aside">aside</aside>
            <aside class="app-body">
                body
                <Nuxt/>
                </aside>
        </section>
    </div>
</template>

<script>
    export default {
        
    }
    // 组件中不写公共样式
</script>

<style>
html,body,#__nuxt,#__layout { 
    height: 100%;
}
</style>


<style scoped>

body{
    margin: 0;
}
.app{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.app-main { 
    display: flex;
    flex-grow: 1;
}
.app-header{
    height: 60px;
    background-color: red;
}
.app-aside { 
    width: 150px;
    background-color: #666666;
}
.app-body{
    background-color: pink;
    flex-grow: 1;
}
</style>